<template>
  <div class="login-container">
    <el-form class="login-page">
      <el-form-item>
        <el-input type="text" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item :inline="true">
        <el-button class="loginUser" type="primary" @click="login"
          >普通用户登录</el-button
        >
        <el-button class="loginAdmin" type="primary" @click="loginAdmin"
          >管理员登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { NO_AUTH } from "@/config/setting";
export default {
  // 使用无token模式时 跳转到根路由
  beforeRouteEnter(to, from, next) {
    NO_AUTH ? next("/") : next();
  },
  name: "Login",
  components: {},
  methods: {
    ...mapMutations({
      setUserType: "userInfo/setUserType",
      changeFrontState: "config/changeFrontState",
      changeLoginState: "config/changeLoginState",
    }),
    // 用户登录
    login() {
      this.setUserType({
        userType: 0,
      });
      this.changeFrontState(true);
      this.changeLoginState(true);
      // this.$router.push("/search");
    },
    //管理员登录
    loginAdmin() {
      this.setUserType({
        userType: 0,
      });
      this.changeFrontState(false);
      this.changeLoginState(true);
      this.$router.push("/server");
    },
  },
};
</script>

<style>
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginUser {
  width: 48%;
}

.loginAdmin {
  width: 48%;
}
</style>
